<template>
  <div class="container">
    <div class="img">
      <img class="Img" src="../../assets/wangyiyun.jpg" alt="" />
    </div>
    <span class="text">网易云音乐</span>
    <form :model="loginInfo">
      <div class="inputs">
        <div class="account">
          <div class="top">
            <i class="iconfont icon-zhanghao"></i>
            <span class="text">account</span>
          </div>
          <div class="bottom">
            <div name="1" prop="phone">
              <input v-model="loginInfo.phone" type="text" />
            </div>
          </div>
        </div>
        <div class="password">
          <div class="top">
            <i class="iconfont icon-jiesuo"></i>
            <span class="text">password</span>
          </div>
          <div class="bottom">
            <div name="2" prop="password">
              <input v-model="loginInfo.password" type="password" />
            </div>
          </div>
        </div>
      </div>
      <div class="login">
        <el-button size="medium" @click="login(loginInfo)">登录</el-button>
      </div>
    </form>
    <div class="Forget-register">
      <div>忘记密码</div>
      <div @click="showPopup">注册账号</div>
    </div>
    <van-popup
      position="left"
      :style="{ height: '100%',width:'100%' }"
      v-model="show"
    >
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" @click="show = false" native-type="submit"
            >注册</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>
<script>
// import { Login } from "../../api/login";

export default {
  data() {
    return {
      loginInfo: {
        phone: "",
        password: "",
      },
      show: false,
      username: "",
      password: "",
    };
  },
  computed: {},
  watch: {},
  methods: {
    login() {
    //   console.log(val);
    // Login(val)
    // .then((res)=>{
    //     console.log(res);
    // })
      this.$router.push("/findMusic");
    },
    showPopup() {
      this.show = true;
    },
    onSubmit(values) {
      console.log("submit", values);
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: rgb(253, 252, 254);
  .img {
    padding-top: 50px;
    height: 250px;
    .Img {
      height: 200px;
    }
  }
  .text {
    margin-top: 20px;
  }
  .login {
    margin-top: 40px;
    .el-button {
      width: 250px;
    }
  }
  .Forget-register {
    margin-top: 50px;
    margin-left: 70px;
    display: flex;
    width: 250px;
    justify-content: space-between;
  }
  .inputs {
    height: 100px;
    margin-top: 60px;
    .account {
      .bottom {
        input {
          border-top: none;
          border-right: none;
          border-left: none;
          width: 250px;
          border-bottom: 1px solid rgb(53, 51, 51);
        }
      }
      .top {
        .text {
          position: absolute;
          top: 43%;
          left: 45%;
          font-size: 15px;
        }
        .icon-zhanghao {
          margin-right: 230px;
          font-size: 25px;
        }
      }
    }
    .password {
      .bottom {
        input {
          width: 250px;
          border-top: none;
          border-right: none;
          border-left: none;
          border-bottom: 1px solid rgb(53, 51, 51);
        }
      }
      margin-top: 5px;
      .top {
        .text {
          position: absolute;
          top: 49%;
          left: 45%;
          font-size: 15px;
        }
        .icon-jiesuo {
          margin-right: 230px;
          font-size: 25px;
        }
      }
    }
  }
}
.van-form {
  margin-top: 50px;
}
</style>